<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单验证</title>
    <style>
        h2{margin: auto;width: 150px;line-height: 40px}
        table{margin:0 auto;width: 600;line-height: 50px;font-size: 14px;}
        input{width: 250px;height: 26px;}
        .t{text-align: center;}  
       .two{background-color: orange;width: 70px;height: 30px;font-size: 20px;
            color: white;}
        a:link,a:visited{color: #222;text-decoration: none;}
        a:hover{color: #fd4913;}
        p{line-height: 38px;font-size: 18px;width: 220px;margin: 0 auto;}
    </style>
</head>
<body>
    <h2>填写注册信息</h2>
    <table>
        <tr><th>用户名称：</th>
            <td>
                <input type="text" name="username" placeholder="长度4-12个字符，英文大小写字母">
            </td><td><div></div></td>
        </tr>
        <tr><th>密码：</th>
            <td>
                <input type="password" name="pwd" placeholder="长度6-20，英文大小写字母,数字，下划线">
            </td><td><div></div></td>
        </tr>
        <tr><th>确认密码：</th>
            <td>
                <input type="password" name="repwd" placeholder="请再次输入密码确认">
            </td><td><div></div></td>
        </tr>
        <tr><th>手机号码：</th>
            <td>
                <input type="text" name="tel" placeholder="13、14、15、17、18开头的11位手机号">
            </td><td><div></div></td>
        </tr>
        <tr><th>电子邮箱：</th>
            <td>
                <input type="text" name="email" placeholder="用户名@域名（域名后缀至少2个字符）">
            </td><td><div></div></td>
        </tr>
        <tr class="t"><td colspan="3"><input type="submit" value="注册" class="two"></tr></td>
    </table>
<script>
    var inputs = document.getElementsByTagName('input');

    for (var i = 0; i < inputs.length - 1; ++i) {
  inputs[i].onblur = inputBlur;
     }
    function inputBlur() {
     var name = this.name;           
     var val = this.value;           
     var tips = this.placeholder;    
     var tips_obj = this.parentNode.nextSibling.firstChild; 
  //去掉两端的空白字符
    val = val.trim();
 
    if (!val) {
      error(tips_obj, '输入框不能为空');
    return false;
  }
  
    var reg_msg = getRegMsg(name, tips);

    if (reg_msg['reg'].test(val)) {

      success(tips_obj, reg_msg['msg']['success']);
  } else {
   
      error(tips_obj, reg_msg['msg']['error']);
  }
}

  function getRegMsg(name, tips) {
    var reg = msg = '';
    switch (name) {
      case 'username':
        reg = /^[a-zA-Z]{4,12}$/;
        msg = {'success': '用户名输入正确', 'error': tips};
      break;
      case 'pwd':
        reg = /^\w{6,20}$/;
        msg = {'success': '密码输入正确', 'error': tips};
      break;
      case 'repwd':
        var con = document.getElementsByTagName('input')[1].value;
        reg = RegExp("^" + con + "$");
        msg = {'success': '两次密码输入正确', 'error': '两次输入的密码不一致'};
       break;
      case 'tel':
        reg = /^1[34578]\d{9}$/;
        msg = {'success': '手机号码输入正确', 'error': tips};
      break;
      case 'email':
        reg = /^(\w+(\_|\-|\.)*)+@(\w+(\-)?)+(\.\w{2,})+$/;
        msg = {'success': '邮箱输入正确', 'error': tips};
      break;
    }
      return {'reg': reg, 'msg': msg};
}
// 成功
  function success(obj, msg) {
    obj.className = 'success';
    obj.innerHTML = msg;
}
// 失败
  function error(obj, msg) {
    obj.className = 'error';
    obj.innerHTML = msg + '，请重新输入';
}
</script>
<p><a href="default.html">返回目录</a></p>
<p><a href="dijiu.html">返回第九章</a></p>
<p><a href="dishi.html">下一章</a></p>
</body>
</html>